<template>
    <div class="Waitpay" v-loading="loading">
        <!--       公共顶部-->
        <Top>
            <i class="el-icon-arrow-left back" slot="leftPart" @click="goback()"></i>
            <p class="title" slot="midPart" >待结算金额 <i class="el-icon-arrow-down" @click="maskShow=true"></i></p>
        </Top>
        <!--筛选弹窗-->
        <transition name="bounce-up">
            <div class="mask" v-if="maskShow" @click.self="maskShow=false">
                <ul class="filterWindow">
                    <li @click="filter(-1)" :class="{on:cost_status===-1}">全部</li>
                    <li @click="filter(0)" :class="{on:cost_status===0}">待结算</li>
                    <li @click="filter(1)" :class="{on:cost_status===1}">已结算</li>
                    <li @click="filter(2)" :class="{on:cost_status===2}">结算取消</li>
                </ul>
            </div>
        </transition>
        <!--列表-->
        <ul class="list" v-if="list.length>0">
            <li 
                class="clearfix animated flipInX"
                :style="{animationDelay:delay(index)}"
                v-for="(item,index) in list"
                :key="index">
                <img :src="item.member_avatar" alt="">
                <div class="info">
                    <h2>{{item.member_name}}</h2>
                    <p style="color:#999">{{item.add_time}}</p>
                    <p>{{item.lession_name}}</p>
                    <p style="color:#3d90ee" v-if="item.cost_status===0">剩余时间：6天20小时45分06秒</p>
                    <p style="color:#3d90ee" v-if="item.cost_status===2">取消结算原因：{{item.fail_reason}}</p>
                </div>
                <div class="right">
                    <h4>{{item.cost_status_word}}</h4>
                    <p :class="{'color-1':item.cost_status===0,'color-2':item.cost_status===1,'color-3':item.cost_status===2}">{{item.get_price}}</p>
                </div>
            </li>
        </ul>
        <!--无数据-->
        <div class="nodata animated fadeIn" v-else>
            <!--<svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-wushuju"></use>
            </svg>-->
            <img src="../../assets/huawa-off.png" alt="" />
            <p>暂无数据..</p>
        </div>
        <!--加载更多-->
        <div v-if="list.length>=prePage">
            <!--加载更多-->
            <p class="moreBtn animated flipInX" v-if="!noData" >
                <el-button 
                           type="primary" 
                           :loading="!loadMoreState" 
                           size="mini" 
                           @click="loadMoreData"
                           :disabled="!loadMoreState">{{loadMoreText}}</el-button>
            </p>
            <!--没有更多-->
            <fieldset class="noMore animated flipInX" v-if="noData" >
                <legend align="center" class="noMoreText">没有更多了</legend>
            </fieldset>
        </div>

    </div>
</template>

<script>
    //导入相关组件
    import Top from '@/components/smallCom/Top'
    export default {
        name: 'Waitpay',
        components: {
            Top,//顶部信息组件
        },
        data () {
            return {
                loading:false,
                maskShow: false,//遮罩
                cost_status: -1,//0.待结算 1.已结算 2.已取消 -1.全部

                list:[],//列表

                /*分页*/
                loadMoreState:true,//加载更多按钮状态
                loadMoreText:'加载更多',//加载更多文本
                currentPage:2,//当前页
                prePage:6,//每页显示几条数据
                noData:false,//是否还有数据
            }
        },
        created(){
            this.loading = true;
            this.Posthttp('/?method=flower.user.costlist',{member_id:this.getMemberId(),cost_status:-1,page:1},(res)=>{
                this.loading = false;
                /*登录是否成功*/
                if(JSON.parse(res.bodyText).status ===1){
                    this.list = JSON.parse(res.bodyText).data.list;
                }else{
                    this.$message.warning(JSON.parse(res.bodyText).msg); 
                }
            });
        },
        methods:{
            //筛选
            filter(index){
                this.maskShow = false;
                this.loading = true;
                this.Posthttp('/?method=flower.user.costlist',{member_id:this.getMemberId(),cost_status:index,page:1},(res)=>{
                    this.loading = false;
                    /*登录是否成功*/
                    if(JSON.parse(res.bodyText).status ===1){
                        this.list = JSON.parse(res.bodyText).data.list;
                        this.cost_status = index;
                    }else{
                        this.cost_status = 0;
                        this.$message.warning(JSON.parse(res.bodyText).msg); 
                    }
                });
            },
            //加载更多
            loadMoreData(){
                this.loadMoreState = false;
                this.loadMoreText = '加载中..';
                this.Posthttp('/?method=flower.user.costlist',{member_id:this.getMemberId(),log_type:this.log_type,page:this.currentPage},(res)=>{
                    this.loadMoreState = true;
                    this.loadMoreText = '加载更多';
                    let Dlength = JSON.parse(res.bodyText).data.list.length;
                    if(Dlength<1){
                        this.noData = true; 
                    }else{
                        this.noData = false;
                        this.currentPage++;
                        this.list = this.list.concat(JSON.parse(res.bodyText).data.list);
                    }
                });
            },
        },
        computed:{

        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .Waitpay{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        padding-top: .8rem;
        overflow-y: auto;
        background-color: #f2f2f2;
        .mask{
            top: .8rem;
        }
        /*筛选弹窗*/
        .filterWindow{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            background-color: #fff;
            text-align: center;
            li{
                height: .8rem;
                line-height: .8rem;
                border-top: 1px solid #e4e4e4;
                &.on{
                    color: #de6940;
                }
            }
        }
        /*列表*/
        .list{
            li{
                position: relative;
                padding: .2rem;
                border-bottom: 1px solid #e4e4e4;
                /**/
                img{
                    width: 1rem;
                    height: 1rem;
                    border-radius: 100%;
                    float: left;
                }
                /**/
                .info{
                    width: 4rem;
                    padding: 0 .2rem;
                    float: left;
                    h2{
                        font-weight: 600;
                        font-size: .3rem;
                        color: #333;
                        padding-top: .2rem;
                    }
                    p{
                        font-size: .22rem;
                        color: #777;
                        margin-top: .16rem;
                        width: 100%;
                    }
                }
                /**/
                .right{
                    width: 1rem;
                    text-align: right;
                    position: absolute;
                    right: .2rem;
                    top: 50%;
                    transform: translateY(-50%);
                    h4{
                        color: #666;
                    }
                    p{
                        font-size: .32rem;
                        margin-top: .36rem;
                    }
                    .color-1{
                        color: #ef9d0e;
                    }
                    .color-2{
                        color: #e5514f;
                    }
                    .color-3{
                        color: #666666;
                    }
                }
            }
        }
    }
</style>
